<template>
  <div class="home-container">
    <topnav :userinfo="userinfo"></topnav>
    <div class="header">
      <div class="header-container">
        <div class="logo">
          <div
            title="我的淘宝"
            href="//i.taobao.com/my_taobao.htm?nekot=1470211439696&amp;tracelog=newmytb_logodianji"
            class="tblogo"
          ></div>
        </div>
        <div class="nav">
          <ul class="nav-left">
            <li class="index">首页</li>
            <li>账户设置</li>
          </ul>
          <div class="nav-right">
            <el-input placeholder="请输入内容">
              <template slot="append"> 搜索 </template>
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="main-container">
      <userAside></userAside>
      <div class="main-body">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="所有订单" name="first">
            <el-row>
              <el-col :span="8">
                <el-input placeholder="请输入内容">
                  <template slot="append"> 订单搜索 </template>
                </el-input></el-col
              >
            </el-row>
            <div class="table">
              <ul class="table-th-container">
                <li class="th-item">宝贝</li>
                <li class="th-2">单价</li>
                <li class="th-2">数量</li>
                <li class="th-3">商品操作</li>
                <li class="th-2">实付款</li>
                <li class="th-3">交易状态</li>
                <li class="th-3">交易操作</li>
              </ul>
              <ul class="table-content-container" v-if="orderlist.length!==0">
                <li
                  class="content-item"
                  v-for="(item, index) in orderlist"
                  :key="index"
                  :class="item.order_status === 0 ? 'opt-remain' : ''"
                >
                  <div class="item-title">
                    <input class="checkbox" type="checkbox" />
                    <span class="orderDate">{{ item.createTime }}</span>
                    <span>订单号：{{ item.orderNum }}</span>
                    <span class="shopName">{{ item.shopName }}</span>
                  </div>
                  <div
                    class="item-body"
                    v-for="(i2, idx) in item.list"
                    :key="idx"
                  >
                    <div class="tbody item-detail">
                      <img :src="`http://127.0.0.1:3007/${i2.picName}`" alt="" />
                      <div class="detail-box">
                        <div class="detail-title">{{ i2.goodName }}</div>
                        <div class="detail-model">
                          {{ i2.model }}
                        </div>
                      </div>
                      <div class="item-price t-item">
                        <span class="originalPrice">￥{{ i2.priceAgo }}</span>
                        <span>￥{{ i2.price }}</span>
                      </div>
                      <div class="t-item">
                        <span>{{ i2.number }}</span>
                      </div>
                      <div class="t-item t-item-opt">
                        <span>退货/退款</span>
                        <span>投诉卖家</span>
                        <span>运费险已出单</span>
                      </div>
                    </div>
                    <div class="tbody item-sum">
                      <span>￥{{ i2.order_sumup }}</span>
                      <span class="note"> （含运费：￥0.00） </span>
                    </div>
                    <div class="tbody item-status">
                      <span>快件已签收</span>
                      <span>订单详情</span>
                      <span>查看物流</span>
                    </div>
                  </div>
                  <div class="order-opt">
                    <el-button
                      type="primary"
                      class="btn-1"
                      v-if="item.order_status == 0 && item.is_deliver == 1"
                      @click="changeStatus(item.shopId, item.orderNum)"
                      >确认收货</el-button
                    >
                    <div class="btn-group">
                      <el-button
                        type="warning"
                        class="btn-1 btn-2 btn"
                        v-if="item.order_status == 0 && item.is_pay == 0"
                        @click="handlePay(item.shopId,item.orderNum)"
                        >立即付款</el-button
                      >
                      <el-button
                        class="btn-1"
                        v-if="item.order_status == 0 && item.is_pay == 1 && item.is_deliver == 0"
                        >催发货</el-button
                      >
                      <el-button
                        type="text"
                        class="btn"
                        v-if="item.order_status == 0 && item.is_pay == 0"
                        >关闭订单</el-button
                      >
                    </div>
                    <el-button
                      type="text"
                      class="btn-1"
                      v-if="item.order_status != 0"
                      >再次购买</el-button
                    >
                  </div>
                </li>
              </ul>
              <div class="nodata-box" v-else>
                <img src="@/assets/images/nodata.png" alt="" >
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="'待付款 ' + orderStatus.ispay" name="second"
            >
            <div class="table">
              <ul class="table-th-container">
                <li class="th-item">宝贝</li>
                <li class="th-2">单价</li>
                <li class="th-2">数量</li>
                <li class="th-3">商品操作</li>
                <li class="th-2">实付款</li>
                <li class="th-3">交易状态</li>
                <li class="th-3">交易操作</li>
              </ul>
              <ul class="table-content-container" v-if="order2pay.length!==0">
                <li
                  class="content-item"
                  v-for="(item, index) in order2pay"
                  :key="index"
                  :class="item.order_status === 0 ? 'opt-remain' : ''"
                >
                  <div class="item-title">
                    <input class="checkbox" type="checkbox" />
                    <span class="orderDate">{{ item.createTime }}</span>
                    <span>订单号：{{ item.orderNum }}</span>
                    <span class="shopName">{{ item.shopName }}</span>
                  </div>
                  <div
                    class="item-body"
                    v-for="(i2, idx) in item.list"
                    :key="idx"
                  >
                    <div class="tbody item-detail">
                      <img :src="`http://127.0.0.1:3007/${i2.picName}`" alt="" />
                      <div class="detail-box">
                        <div class="detail-title">{{ i2.goodName }}</div>
                        <div class="detail-model">
                          {{ i2.model }}
                        </div>
                      </div>
                      <div class="item-price t-item">
                        <span class="originalPrice">￥{{ i2.priceAgo }}</span>
                        <span>￥{{ i2.price }}</span>
                      </div>
                      <div class="t-item">
                        <span>{{ i2.number }}</span>
                      </div>
                      <div class="t-item t-item-opt">
                        <span>退货/退款</span>
                        <span>投诉卖家</span>
                        <span>运费险已出单</span>
                      </div>
                    </div>
                    <div class="tbody item-sum">
                      <span>￥{{ i2.order_sumup }}</span>
                      <span class="note"> （含运费：￥0.00） </span>
                    </div>
                    <div class="tbody item-status">
                      <span>快件已签收</span>
                      <span>订单详情</span>
                      <span>查看物流</span>
                    </div>
                  </div>
                  <div class="order-opt">
                    <div class="btn-group">
                      <el-button
                        type="warning"
                        class="btn-1 btn-2 btn"
                        >立即付款</el-button
                      >
                      <el-button
                        type="text"
                        class="btn"
                        >关闭订单</el-button
                      >
                    </div>
                  </div>
                </li>
              </ul>
              <div class="nodata-box" v-else>
                <img src="@/assets/images/nodata.png" alt="" >
              </div>
            </div>

            </el-tab-pane
          >
          <el-tab-pane :label="'待收货 ' + orderStatus.isdeliver" name="third"
            >
            <div class="table">
              <ul class="table-th-container">
                <li class="th-item">宝贝</li>
                <li class="th-2">单价</li>
                <li class="th-2">数量</li>
                <li class="th-3">商品操作</li>
                <li class="th-2">实付款</li>
                <li class="th-3">交易状态</li>
                <li class="th-3">交易操作</li>
              </ul>
              <ul class="table-content-container" v-if="order2receive.length!==0">
                <li
                  class="content-item"
                  v-for="(item, index) in order2receive"
                  :key="index"
                  :class="item.order_status === 0 ? 'opt-remain' : ''"
                >
                  <div class="item-title">
                    <input class="checkbox" type="checkbox" />
                    <span class="orderDate">{{ item.createTime }}</span>
                    <span>订单号：{{ item.orderNum }}</span>
                    <span class="shopName">{{ item.shopName }}</span>
                  </div>
                  <div
                    class="item-body"
                    v-for="(i2, idx) in item.list"
                    :key="idx"
                  >
                    <div class="tbody item-detail">
                      <img :src="`http://127.0.0.1:3007/${i2.picName}`" alt="" />
                      <div class="detail-box">
                        <div class="detail-title">{{ i2.goodName }}</div>
                        <div class="detail-model">
                          {{ i2.model }}
                        </div>
                      </div>
                      <div class="item-price t-item">
                        <span class="originalPrice">￥{{ i2.priceAgo }}</span>
                        <span>￥{{ i2.price }}</span>
                      </div>
                      <div class="t-item">
                        <span>{{ i2.number }}</span>
                      </div>
                      <div class="t-item t-item-opt">
                        <span>退货/退款</span>
                        <span>投诉卖家</span>
                        <span>运费险已出单</span>
                      </div>
                    </div>
                    <div class="tbody item-sum">
                      <span>￥{{ i2.order_sumup }}</span>
                      <span class="note"> （含运费：￥0.00） </span>
                    </div>
                    <div class="tbody item-status">
                      <span>快件已签收</span>
                      <span>订单详情</span>
                      <span>查看物流</span>
                    </div>
                  </div>
                  <div class="order-opt">
                    <el-button
                      type="primary"
                      class="btn-1"
                      @click="changeStatus(item.shopId, item.orderNum)"
                      >确认收货</el-button
                    >
                  </div>
                </li>
              </ul>
              <div class="nodata-box" v-else>
                <img src="@/assets/images/nodata.png" alt="" >
              </div>
            </div>
            </el-tab-pane
          >
          <el-tab-pane label="待评价" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import topnav from '@/components/topnav.vue'
import userAside from '@/components/userAside.vue'
export default {
  components: {
    topnav,
    userAside
  },
  data () {
    return {
      userinfo: {},
      activeName: 'first',
      orderlist: [],
      orderStatus: {},
      order2pay: [],
      order2receive: []
    }
  },
  created () {
    this.getUserInfo()
  },
  mounted () {

  },
  computed: {},
  methods: {
    async getUserInfo () {
      const { data: res } = await this.$http.get('/user/getUserInfo')
      if (res.code !== 200) return this.$message.error('获取用户信息失败！')
      this.userinfo = res.data
      this.getUserOrder()
      this.getOrderStatus()
    },
    async getUserOrder () {
      const { data: res } = await this.$http.post('/order/getUserOrder', {
        id: this.userinfo.id
      })
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.orderlist = res.data
    },
    async changeStatus (shopId, orderNum) {
      this.$confirm('是否确认收货？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await this.$http.post('/order/change2finish', {
            userId: this.userinfo.id,
            shopId: shopId,
            orderNum: orderNum
          })
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          this.getUserOrder()
          this.getOrderStatus()
        })
        .catch(() => {})
    },
    async getOrderStatus () {
      const { data: res } = await this.$http.post('/order/getOrderStatus', {
        id: this.userinfo.id
      })
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.orderStatus = res.data
    },
    async get2payOrder () {
      const { data: res } = await this.$http.post('/order/get2payOrder', { id: this.userinfo.id })
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.order2pay = res.data
    },
    async get2deliver () {
      const { data: res } = await this.$http.post('/order/get2receive', { id: this.userinfo.id })
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.order2receive = res.data
    },
    handleClick (tab, event) {
      if (tab.name === 'second') {
        this.get2payOrder()
      } else if (tab.name === 'third') {
        this.get2deliver()
      }
    },
    async handlePay (shopId, orderNum) {
      const { data: res } = await this.$http.post('/order/change2deliver', {
        userId: this.userinfo.id,
        shopId: shopId,
        orderNum: orderNum
      })
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.getUserOrder()
      this.getOrderStatus()
    }
  }
}
</script>
<style lang="less" scoped>
.home-container {
  height: 100%;
  width: 100%;
  .main-container {
    width: 1200px;
    margin: 0 auto;
    padding: 25px 0;
    display: flex;
    .main-body {
      flex: 1;
      margin-left: 15px;
      .table {
        padding-top: 20px;
        .table-th-container {
          background: #f5f5f5;
          display: flex;
          border: 1px solid #eee;
          li {
            height: 40px;
            line-height: 40px;
            color: #3c3c3c;
            text-align: center;
            font-size: 12px;
          }
          .th-item {
            width: 25%;
          }
          .th-2 {
            width: 10%;
          }
          .th-3 {
            width: 15%;
          }
        }
        .table-content-container {
          .content-item {
            height: auto;
            font-size: 12px;
            margin-top: 20px;
            border: 1px solid #eee;
            position: relative;
            .item-title {
              height: 42px;
              line-height: 42px;
              padding-left: 30px;
              display: flex;
              background: #f5f5f5;
              .orderDate {
                font-weight: 700;
                margin-left: 5px;
                margin-right: 10px;
              }
              .shopName {
                margin-left: 80px;
                display: block;
                width: 80px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            .item-body {
              display: flex;
              height: 118px;
              .item-detail {
                width: 60%;
                display: flex;
                border-right: 1px solid #daf3ff;
                img {
                  width: 80px;
                }
                .detail-box {
                  margin-left: 20px;
                  width: 35%;
                  .detail-title {
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    cursor: pointer;
                    &:hover {
                      color: #f40;
                      text-decoration: underline;
                    }
                  }
                  .detail-model {
                    margin-top: 10px;
                    color: rgba(0, 0, 0, 0.65);
                    width: 100%;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                  }
                }
                .item-price {
                  display: flex;
                  flex-direction: column;
                  .originalPrice {
                    text-decoration: line-through;
                    color: rgba(0, 0, 0, 0.65);
                  }
                }
                .t-item {
                  width: 20%;
                }
                .t-item-opt {
                  display: flex;
                  flex-direction: column;
                  line-height: 20px;
                  cursor: pointer;
                  span {
                    &:hover {
                      color: #f40;
                      text-decoration: underline;
                    }
                  }
                }
              }
              .tbody {
                padding: 20px;
                border-right: 1px solid #eee;
              }
              // .tbody:not(:last-child){
              //     border-right: 1px solid #eee;
              // }
              .item-sum {
                display: flex;
                flex-direction: column;
                span:nth-child(1) {
                  font-weight: 700;
                  font-size: 14px;
                  text-align: center;
                  line-height: 24px;
                }
                .note {
                  color: rgba(0, 0, 0, 0.65);
                }
              }
              .item-status {
                display: flex;
                flex-direction: column;

                span {
                  line-height: 20px;
                }
                span:not(:first-child) {
                  cursor: pointer;
                  &:hover {
                    color: #f40;
                    text-decoration: underline;
                  }
                }
              }
            }
            .order-opt {
              position: absolute;
              right: 20px;
              top: 50%;
              margin: auto;
              // flex: 1;
              // text-align: center;
              .btn-1 {
                height: 30px;
                font-size: 12px;
                padding: 8px 20px;
              }
            }
          }
          .opt-remain {
            border: 1px solid #daf3ff;
            .item-title {
              background: #eaf8ff;
            }
            .tbody {
              border-right: 1px solid #daf3ff !important;
            }
          }
        }
      }
      .nodata-box{
        width: 100%;
        text-align: center;
      }
    }
  }
}
.header {
  height: 60px;
  background: #ff4401;
  padding: 12px 0;
  position: relative;
  z-index: 5;
  border-bottom: 1px #e7e7e7 solid;

  .header-container {
    width: 1200px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: flex;
    .logo {
      width: fit-content;
      display: flex;
      align-items: center;
      height: 100%;
      .tblogo {
        width: 140px;
        height: 36px;
        display: inline-block;
        vertical-align: middle;
        background-image: url(//img.alicdn.com/tps/i2/T1KNKSFldbXXcEPB2X-140-34.png);
        background-image: -webkit-image-set(url(//img.alicdn.com/tps/i4/T1IraRFjVcXXcEPB2X-140-34.png) 1x,url(//img.alicdn.com/tps/i1/T1KXqHFbdbXXaqVtDA-280-62.png) 2x);
        background-repeat: no-repeat;
        background-position: left center;
      }
    }
    .nav {
      margin-left: 20px;
      padding-left: 20px;
      display: flex;
      align-items: center;
      width: calc(100% - 160px);
      justify-content: space-between;
      .nav-left {
        height: 60px;
        display: flex;
        line-height: 60px;
        li {
          cursor: pointer;
          z-index: 1;
          margin-right: 15px;
          color: #fff;
          position: relative;
          &:hover:before {
            content: "";
            height: 0px;
            width: 0px;
            position: absolute;
            border: 8px solid #000;
            border-bottom-color: #fff;
            border-right-color: transparent;
            border-left-color: transparent;
            border-top-color: transparent;
            bottom: 0;
            right: 20%;
          }
        }
      }
    }
  }
}
.btn-group{
  .btn{
    display: block;
  }
  .btn-2{
    background: #ff6000;
  }
}
</style>
<style lang="less">
.el-tabs__item.is-active {
  color: #ff6000;
  font-weight: 700;
}
.el-tabs__item:hover {
  color: #ff6000;
}
.el-tabs__item {
  font-weight: 700;
}
.el-tabs__active-bar {
  background: #ff6000;
}
.el-button--text{
  font-size: 12px;
  color: rgba(0, 0, 0, 0.85);
  &:hover{
    color: #f40;
  }
}
</style>
